<script setup lang="ts">
import { ContentWrap } from '@/components/ContentWrap'
import { inject, onMounted } from 'vue'

defineOptions({
  name: 'Menu5'
})
// 发送请求获取tableDatagit
const tableData = [
  {
    id: 1,
    keyword: '图片',
    search_volume: 291071,
    search_number: 287874,
    heat: 289792.2,
    heat_rank: 1
  },
  {
    id: 2,
    keyword: '意思',
    search_volume: 190856,
    search_number: 190413,
    heat: 190678.8,
    heat_rank: 2
  },
  {
    id: 3,
    keyword: '手机',
    search_volume: 191458,
    search_number: 189064,
    heat: 190500.4,
    heat_rank: 3
  },
  {
    id: 4,
    keyword: '小说',
    search_volume: 159798,
    search_number: 158772,
    heat: 159387.6,
    heat_rank: 4
  },
  {
    id: 5,
    keyword: '视频',
    search_volume: 159798,
    search_number: 155855,
    heat: 158220.8,
    heat_rank: 5
  },
  {
    id: 6,
    keyword: '2016',
    search_volume: 144190,
    search_number: 144022,
    heat: 144122.8,
    heat_rank: 6
  },
  {
    id: 7,
    keyword: '下载',
    search_volume: 134926,
    search_number: 133245,
    heat: 134253.6,
    heat_rank: 7
  },
  {
    id: 8,
    keyword: '大全',
    search_volume: 131462,
    search_number: 131210,
    heat: 131361.2,
    heat_rank: 8
  },
  {
    id: 9,
    keyword: 'qq',
    search_volume: 98903,
    search_number: 98189,
    heat: 98617.4,
    heat_rank: 9
  },
  {
    id: 10,
    keyword: '电影',
    search_volume: 96576,
    search_number: 95926,
    heat: 96316,
    heat_rank: 10
  }
]

let echarts = inject<any>('$echarts')

let echartInit3 = () => {
  let option = {
    series: [
      {
        type: 'wordCloud',
        shape: 'circle',
        width: '100%',
        height: '100%',
        sizeRange: [12, 60],
        rotationRange: [-90, 90],
        rotationStep: 45,
        gridSize: 8,
        drawOutOfBound: false,
        shrinkToFit: false,
        layoutAnimation: true,
        textStyle: {
          fontFamily: 'sans-serif',
          fontWeight: 'bold',
          color: function () {
            // Random color
            return (
              'rgb(' +
              [
                Math.round(Math.random() * 160),
                Math.round(Math.random() * 160),
                Math.round(Math.random() * 160)
              ].join(',') +
              ')'
            )
          }
        },
        emphasis: {
          focus: 'self',
          textStyle: {
            textShadowBlur: 10,
            textShadowColor: '#333'
          }
        },

        data: [
          { name: '图片', value: 268 },
          { name: '手机', value: 193 },
          { name: '小说', value: 178 },
          { name: '视频', value: 215 },
          { name: '下载', value: 254 },
          { name: 'qq', value: 168 },
          { name: '电影', value: 291 },
          { name: '百度', value: 177 },
          { name: '英语', value: 189 },
          { name: '游戏', value: 236 }
        ]
      }
    ]
  }
  let ch = document.getElementById('word-chart')
  console.log(ch, 'ch')
  var myChart = echarts.init(ch)
  myChart.setOption(option)
}

onMounted(() => {
  echartInit3()
})
</script>

<template>
  <ContentWrap :title="'实时热度趋势分析'">
    <div
      id="word-chart"
      style="width: 90%; height: 300px; padding-top: 10px; padding-left: 30px"
    ></div>
    <el-table :data="tableData" :border="true" style="width: 100%">
      <el-table-column type="expand">
        <template #default="props">
          <div class="info" m="4">
            <p m="t-0 b-2"
              >ID: <span id="row_id">{{ props.row.id }}</span></p
            >
            <p m="t-0 b-2">热词: {{ props.row.keyword }}</p>
            <p m="t-0 b-2">热度排名: {{ props.row.heat_rank }}</p>
            <p></p>
            <p m="t-0 b-2">搜索量: {{ props.row.search_volume }}</p>
            <p m="t-0 b-2">搜索人次: {{ props.row.search_number }}</p>
            <p></p>
            <p m="t-0 b-2">
              热度: {{ props.row.heat }}<br />
              <span class="comment">（热度 = 搜索量*0.4 + 搜索人次*0.6）</span>
            </p>
          </div>
          <div id="chart" style="width: 100%; height: 100%"></div>
        </template>
      </el-table-column>
      <el-table-column label="热词" prop="keyword" />
      <el-table-column label="热度" prop="heat" />
    </el-table>
  </ContentWrap>
</template>

<style>
.info {
  display: grid;
  width: 100%;
  padding: 0;
  margin: 0;
  margin-left: 60px;
  grid-template-columns: 1fr 5fr 5fr;
}

.comment {
  font-size: 10px;
  color: #bababa;
}
</style>
